<template>
    <div>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="registCode" label="挂号编号" width="180">
            </el-table-column>
            <el-table-column prop="registName" label="挂号名称" width="180">
            </el-table-column>
            <el-table-column prop="sequenceNo" label="显示顺序号">
            </el-table-column>
            <el-table-column prop="registFee" label="挂号费" width="180">
            </el-table-column>
            <el-table-column>
                <template slot-scope="scope">
                    <el-button size="mini" @click="updateDialgo(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="confirmDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button type="primary" @click="openDialgo">添加挂号信息</el-button>
        <!-- 新增、更新弹窗区域 -->
        <!-- 新增 -->
        <el-dialog title="添加挂号信息" :visible.sync="dialogFormVisible" @close="closeDialog">
            <el-form :model="form">
                <el-form-item label="挂号编号" :label-width="formLabelWidth">
                    <el-input v-model="form.registCode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="挂号名称" :label-width="formLabelWidth">
                    <el-input v-model="form.registName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="显示顺序号" :label-width="formLabelWidth">
                    <el-input v-model="form.sequenceNo" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="挂号费" :label-width="formLabelWidth">
                    <el-input v-model="form.registFee" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="handleAdd">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改 -->
        <el-dialog title="修改挂号信息" :visible.sync="editDialogFormVisible" @close="closeEditDialog">
            <el-form :model="form">
                <el-form-item label="挂号编号" :label-width="formLabelWidth">
                    <el-input v-model="form.registCode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="挂号名称" :label-width="formLabelWidth">
                    <el-input v-model="form.registName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="显示顺序号" :label-width="formLabelWidth">
                    <el-input v-model="form.sequenceNo" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="挂号费" :label-width="formLabelWidth">
                    <el-input v-model="form.registFee" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeEditDialog">取 消</el-button>
                <el-button type="primary" @click="handleEdit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getListFun, deleteByIdFun1, addBodyFun, updateFun } from '@/CommonJs/RequestApi';

export default {
    name: 'Resgister',
    data() {
        return {
            tableData: [],
            editDialogFormVisible: false,
            dialogFormVisible: false,
            form: {
                registCode: '',
                registName: '',
                sequenceNo: '',
                registFee: '',
                registQuota: 40,
                DelMark: 1
            },
            formLabelWidth: '120px'
        };
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            const data1 = {
                page: 1,
                limit: 5
            };
            getListFun('registlevel/get_register', data1)
                .then(reponse => {
                    console.log(reponse)
                    this.tableData = reponse.data.data;
                    //console.log(tableData)
                })
                .catch(error => {
                    console.error(error);
                });
        },
        //添加按钮
        handleAdd() {
            addBodyFun('registlevel/add_register', this.form)
                .then(response => {
                    this.tableData.push(response.data);
                    this.$message.success('添加成功');
                    location.reload()
                    this.dialogFormVisible = false;
                    this.form = {
                        registCode: '',
                        registName: '',
                        sequenceNo: '',
                        registFee: ''
                    };
                })
                .catch(error => {
                    console.error(error);
                    this.$message.error('添加失败');
                });
        },
        //打开弹窗进行修改
        updateDialgo(index, row) {
            this.editDialogFormVisible = true;
            this.form = { ...row };
        },
        //修改按钮
        handleEdit(index, row) {
            updateFun('registlevel/update_register', this.form)
                .then(response => {
                    this.$message.success('修改成功');
                    location.reload()
                    this.editDialogFormVisible = false;
                    this.form = {
                        registCode: '',
                        registName: '',
                        sequenceNo: '',
                        registFee: ''
                    };
                })
                .catch(error => {
                    console.error(error);
                    this.$message.error('修改失败');
                });
        },
        //删除按钮
        confirmDelete(index, row) {
            let confirmDelete = confirm("删除操作不可逆，一旦删除将无法恢复，您确定要删除吗？");
            if (confirmDelete) {
                deleteByIdFun1('registlevel/delete_register', row.id)
                    .then(response => {
                        console.log(index,row)
                        this.tableData.splice(index, 1);
                        this.$message.success('删除成功');
                        location.reload()
                    })
                    .catch(error => {
                        console.log(index,row)
                        console.error(error);
                        this.$message.error('删除失败');
                    });
            }
        },
        //弹窗部分方法
        //打开添加弹窗按钮
        openDialgo() {
            this.dialogFormVisible = true;
        },
        //添加弹窗中的取消按钮，关闭弹窗页面
        closeDialog() {
            this.dialogFormVisible = false;
            this.form = {
                registCode: '',
                registName: '',
                sequenceNo: '',
                registFee: ''
            };
        },
        //修改弹窗中的取消按钮，关闭弹窗页面
        closeEditDialog() {
            this.editDialogFormVisible = false;
            this.form = {
                registCode: '',
                registName: '',
                sequenceNo: '',
                registFee: ''
            };
        }
    }, mounted() {

    }
}

</script>


<style scoped></style>